<template>
  <div>
    <el-row>
      <el-col :span="22">
        <div class="sec-title">视频管理</div>
      </el-col>
      <el-col :span="2">
        <div>
          <i class="el-icon-plus sec-blue"></i>
          <el-button style="outline: none;" @click="uploadVideoKey = true" type="text">上传视频</el-button>
        </div>
      </el-col>
    </el-row>
    <el-form
      :inline="true"
      :model="queryParam"
      class="demo-form-inline"
    >
      <el-form-item label="视频名称">
        <el-input
          v-model="queryParam.videoName"
          placeholder="视频名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="上传者">
        <el-input
          v-model="queryParam.accountName"
          placeholder="上传者"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="initSearchVideos"
        >查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="videos"
      height="590"
    >
      <el-table-column
        prop="videoId"
        label="视频编号"
      >
      </el-table-column>
      <el-table-column
        prop="videoName"
        label="视频名称"
      >
      </el-table-column>
      <el-table-column
        prop="videoUrl"
        label="视频路径"
      >
        <template slot-scope="scope">
          <el-popover
          trigger="hover"
          placement="top"
        >
          <p> {{ scope.row.videoSrc }}</p>
          <div
            slot="reference"
            class="name-wrapper"
          >
            {{ handlePath(scope.row.videoSrc) }}
          </div>
        </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        prop="videoTime"
        label="视频时长"
      >
      <template slot-scope="scope">
        {{ parseVideoTime(scope.row.videoTime) }}
      </template>
      </el-table-column>
      <el-table-column
        prop="accountName"
        label="上传者"
      >
      </el-table-column>
      <el-table-column
        prop="uploadTime"
        label="上传时间"
        width="180"
      >
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="playVideo(scope.row)"
          >播放</el-button>
          <el-button
            type="text"
            size="small"
            @click="overrideVideo(scope.row)"
          >修改</el-button>
          <el-button
            type="text"
            size="small"
            @click="deleteVideo(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="pageData.total"
      @prev-click="preHandle"
      @next-click="nextHandle"
      @current-change="currentChangeHandle"
    >
    </el-pagination>

    <!-- 上传视频 -->
    <el-drawer
      :title="isUploadVideo ? '上传视频' : '修改视频'"
      :visible.sync="uploadVideoKey"
      direction="rtl">
      <el-form ref="form" :model="uploadData" label-width="80px">
        <el-form-item label="视频名称">
          <el-input v-model="uploadData.videoName"></el-input>
        </el-form-item>
        <el-form-item label="视频类型">
          <el-select v-model="uploadData.videoType" placeholder="视频类型">
            <el-option v-for="(item, index) in videoType" :label="item.codeName" :value="item.codeValue" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="视频描述">
          <el-input v-model="uploadData.videoDesc"></el-input>
        </el-form-item>
        <el-form-item label="要求类型">
          <el-select v-model="uploadData.requireType" placeholder="要求类型">
            <el-option v-for="(item, index) in requireType" :label="item.codeName" :value="item.codeValue" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="isUploadVideo ? '上传视频' : '上传封面'">
          <el-upload
            ref="upload"
            action="String"
            class="upload-demo"
            :multiple="false"
            :auto-upload="false"
            :before-upload="uploadCheckBefore"
            :file-list="fileList">
            <el-button size="small" type="primary">选择视频</el-button>
            <div slot="tip" class="el-upload__tip">只能上传.mp4文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="uploadVideoHandle">确定</el-button>
          <el-button @click="uploadVideoKey = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { getConfig, uploadVideo, queryVideos, deleteVideo } from '@/api/system/system.js'
export default {
  data() {
    return {
      editVideoKey: false,
      editVideo: {
        videoName: ''
      },
      uploadVideoKey: false,
      queryParam: {
        videoName: '',
        accountName: '',
        current: 1,
        pageSize: 10
      },
      fileList: [],
      videos: [],
      requireType: [],
      videoType: [],
      uploadData: {
        videoName: '',
        videoTyep: '',
        videoDesc: '',
        requireType: ''
      },
      isUploadVideo: true,
      pageData: {
        current: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  async mounted() {
    const {data: requireType} = await getConfig({codeType: 'REQUIRE_TYPE', codeValue: ''})
    if (requireType.code === 200) {
      this.requireType = requireType.data.cache
    }
    const {data: videoType} = await getConfig({codeType: 'VIDEO_TYPE', codeValue: ''})
    if (videoType.code === 200) {
      this.videoType = videoType.data.cache
    }
    this.searchVideos()
    
  },
  computed: {
    parseVideoTime() {
      return function(videoTime) {
        var formatTime = ""
        if (videoTime && videoTime > 0) {
          var hours = Math.round(videoTime / 1000 / 60 / 60)
          var min = Math.round(videoTime / 1000 / 60)
          var second = Math.round(videoTime / 1000)
          console.log(second)
          if (hours && hours > 1) {
            formatTime = formatTime + hours + " 小时"
            return formatTime
          }else if (min && min > 1) {
            formatTime = formatTime + min + " 分钟"
            return formatTime
          }else if (second && second > 1) {
            formatTime = formatTime + second + " 秒"
            return formatTime
          }
        }
        return "时间过短或是未记录"
      }
    }
  },
  methods: {
    preHandle(current) {
      this.currentChangeHandle(current)
    },
    nextHandle(current) {
      this.currentChangeHandle(current)
    },
    currentChangeHandle(current) {
      this.pageData.current = current
      this.searchVideos()
    },
    uploadCheckBefore() {
      return this.uploadData && this.uploadData.videoName && this.uploadData.videoType && this.uploadData.requireType
    },
    async searchVideos() {
      this.queryParam.current = this.pageData.current
      this.queryParam.pageSize = this.pageData.pageSize
      const {data:res} = await queryVideos(this.queryParam)
      if (res.code === 200) {
        this.videos = res.data.videos.records
        this.pageData.total = res.data.videos.total
      }
    },
    initSearchVideos() {
      this.pageData.current = 1
      this.pageData.pageSize = 10
      this.searchVideos()
    },
    async uploadVideoHandle() {
      let formData = new FormData()
      if (this.$refs.upload.uploadFiles && this.$refs.upload.uploadFiles.length > 0) {
        formData.append('videoFile', this.$refs.upload.uploadFiles[0].raw)
      }
      formData.append('videoName', this.uploadData.videoName)
      formData.append('videoDesc', this.uploadData.videoDesc)
      formData.append('videoType', this.uploadData.videoType)
      formData.append('requireType', this.uploadData.requireType)
      var uploadType = 1
      if (!this.isUploadVideo) {
        uploadType = 2
        formData.append('videoId', this.uploadData.videoId)
      }
      formData.append('uploadType', uploadType)
      const {data: res} = await uploadVideo(formData)
      if (res.code === 200) {
        this.$message.success('上传成功')
      } 
      if (res.code === 500) {
        this.$message.error('上传失败')
      }
      this.uploadVideoKey = false
      this.searchVideos()
    },
    handlePath(path) {
      return path.length > 21 ? path.slice(0, 16) + '...' : path
    },
    async deleteVideo(row) {
      await deleteVideo(row.videoId)
      this.searchVideos()
      this.$message.success('删除成功')
    },
    overrideVideo(row) {
      this.isUploadVideo = false
      this.uploadVideoKey = true
      this.uploadData = {...row}
      console.log(this.uploadData)
    },
    submitEditVideo() {
      this.editVideoKey = false
      this.$message.success('修改成功')
    },
    playVideo(row) {
      this.$store.dispatch('current_video', JSON.stringify(row))
      this.$router.push("/videoDetail")
    }
  },
};
</script>

<style lang="css" scoped>
.sec-blue {
  color: #409eff;
}
.sec-title {
  font-size: 18px;
  font-weight: 700;
}
.el-button {
  outline: none;
}
</style>